<el-card shadow="never">

  <!-- 查询区域 -->
  <div class="table-page-search-wrapper">
    <el-form :inline="true" :model="searchModel" size="small" >
      <el-form-item label="工号">
        <el-input v-model="searchModel.workNo" placeholder="工号"></el-input>
      </el-form-item>
      <el-form-item label="登录名">
        <el-input v-model="searchModel.username" placeholder="登录名"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="searchModel.realname" placeholder="姓名"></el-input>
      </el-form-item>
      <template v-if="toggleSearchStatus">
        <el-form-item label="手机号">
          <el-input v-model="searchModel.phone" placeholder="手机号"></el-input>
        </el-form-item>
      </template>
      <el-form-item>
           <span style="float: left;overflow: hidden;" class="">
              <el-button type="primary" @click="searchQuery" icon="el-icon-search">查询</el-button>
              <el-button type="primary" @click="searchReset" icon="el-icon-refresh" style="margin-left: 8px">重置</el-button>

              <el-button @click="handleToggleSearch()" type="text" size="small">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <i :class="toggleSearchStatus ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
              </el-button>


          </span>
      </el-form-item>
    </el-form>
  </div>

  <!-- 操作按钮区域 -->
  <div class="table-operator">
    <el-button  icon="el-icon-plus" size="small " class="addBtn" type="primary" @click="handleAdd">新增</el-button>
  </div>

  <!-- table区域-begin -->
  <div class="project">
      <el-table :data="dataSource" style="width: 100%" :header-cell-style="{background:'#eef1f6',color:'#606266'}"  v-loading="loading" size="small">
        <el-table-column prop="workNo" label="工号" width="200"></el-table-column>
        <el-table-column prop="username" label="登录名" width="200"></el-table-column>
        <el-table-column prop="realname" label="姓名" width="200"></el-table-column>
        <el-table-column prop="phone" label="手机号码"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="birthday" label="生日"></el-table-column>
        <el-table-column label="性别">
          <template slot-scope="scope">
            {{ scope.row.sex == 1 ? '男': '女' }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="handleDelete(scope.row.id)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-table>

    <pagination
      :total="ipagination.total"
      :page.sync="ipagination.current"
      :limit.sync="ipagination.pageSize"
      @pagination="loadData"
    ></pagination>
  </div>
  <user-modal ref="modalForm" @ok="modalFormOk" ></user-modal>
</el-card>
